{% extends 'generic/Popup.twig' %}
{% block popup_id %}upload-course-materials-form{% endblock %}
{% block title %}Upload Course Materials{% endblock %}
{% block body %}
    <div id="material-upload-form" class="flex-col flex-col-space">
        <p>
            <strong>Path to directory containing course materials file(s):</strong><br />
            {{ folderPath~'/'~courseMaterial }}
        </p>
        <label id="cm_path">
            <p>
                <strong>Optional: amend the above path to use a sub directory</strong><br />
                e.g. "optional/subdirectory" makes the full path:<br />
                {{ folderPath~'/'~courseMaterial }}optional/subdirectory
            </p>
            <input type="text" id="input-provide-full-path" class="full-width" name="eg_config_path" value="" placeholder="optional/subdirectory"/>
        </label>
        <label id="upload_sections">
            <p class="black-message">
                Do you want to restrict this course material to some sections?
            </p>
            <label class = "radio">
                <input id = "all_Sections_Showing" name="show_Some_Section_Selection" type = "radio" onchange="toggleRegistrationSections()" checked>
                No
            </label>
            <label class = "radio">
                <input name="show_Some_Section_Selection" type = "radio" onchange="toggleRegistrationSections()">
                Yes
            </label>
            <script type="text/javascript">
                function toggleRegistrationSections(){
                    $("#show_Some_Section_Selection").toggle();
                } 
            </script>
            <div id = "show_Some_Section_Selection" style="display: none">
            {% for section in reg_sections %}
                <tr>
                    <td>Section {{ section['sections_registration_id'] }}</td>
                    <td><input id="section-{{ section['sections_registration_id'] }}" type="checkbox" value="off"/></td>
                </tr>
            {% endfor %}
            </div>
        </label>
        <label id="upload_dt">
            <p>
                <strong>Choose a time to release the files being uploaded:</strong>
            </p>
            <input id="upload_picker" class="date_picker" type="text" size="26" value='9998-01-01 00:00:00'/>
        </label>
        <label>
            <input id="expand-zip-checkbox" type="checkbox" value="off"/>
            Unzip zip files (Note: If checked, will replace all folders/files)
        </label>
        <label>
            <input id="hide-materials-checkbox" type="checkbox" value="off"/>
            Hide from students (Note: If checked, students will not be able to see course matierals, but can still access them via the URL)
        </label>
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <div id="upload-boxes">
            {# upload1 and input-file1 required for drag-and-drop.js #}
            <div id="upload1" class="file-input">
                <label class="label" for="input-file1">"Drag your file(s) here or click to open file browser"</label>
                <input type="file" name="files" id="input-file1" onchange="addFilesFromInput(1,false)" multiple />
                <table class="file-upload-table" id="file-upload-table-1"></table>
            </div>
        </div>
        <p>Total files cannot exceed 10 mb or 10240 kb.</p>
    </div>
    <script type="text/javascript">
        function makeSubmission(expandZip, hideFromStudents ,cmPath, requestedPath,cmTime, sections) {
            handleUploadCourseMaterials("{{ csrf_token }}", expandZip, hideFromStudents, cmPath, requestedPath,cmTime, sections);
        }
        $(function() {
            $("#submit-materials").click(function(e){ // Submit button

                var sections = [];
                var cmTime = document.getElementById("upload_picker").value;
                var cb = $("input#expand_zip_checkbox");
                var expandZip = 'off';
                if  ($('#expand-zip-checkbox').is(':checked'))  {
                    expandZip = 'on';
                }
                var hideFromStudents = 'off';
                if  ($('#hide-materials-checkbox').is(':checked'))  {
                    hideFromStudents = 'on';
                }
                var reg_sectionArray = JSON.parse('{{ reg_sections|json_encode|raw }}');
                
                reg_sectionArray.forEach(function(element){
                    var currentSection = '#section-' +element['sections_registration_id']
                    if  ($(currentSection).is(':checked'))  {
                        sections.push(element['sections_registration_id']);
                    }
                });
                
                if(document.getElementById('show_Some_Section_Selection').style.display == "none"){
                    sections = null;
                }
                var cmPath = document.getElementById('cm_path').innerHTML;

                var requestedPath = document.getElementById("input-provide-full-path").value;
                makeSubmission(expandZip, hideFromStudents, cmPath, requestedPath,cmTime, sections);
                e.stopPropagation();
            });
        });

        flatpickr('#upload_picker', {
                    plugins: [ShortcutButtonsPlugin(
                        {
                            button: [
                                {
                                    label: "Now"
                                },
                                {
                                    label: "Tomorrow"
                                },
                                {
                                    label: "End of time"
                                }

                            ],
                            onClick: (index, fp) => {
                                let date;
                                switch (index) {
                                    case 0:
                                        updateToServerTime(fp);
                                        break;
                                    case 1:
                                        updateToTomorrowServerTime(fp);
                                        break;
                                    case 2:
                                        date = new Date("9998-01-01 00:00:00");
                                        fp.setDate(date,true);
                                        break;

                                }
                            }
                        }
                    )],
                    allowInput: true,
                    enableTime: true,
                    enableSeconds: true,
                    time_24hr: true,
                    dateFormat: "Y-m-d H:i:S"
                    });
    </script>
    <script type="text/javascript">
        createArray(1);
        var dropzone = document.getElementById("upload1");
        dropzone.addEventListener("dragenter", draghandle, false);
        dropzone.addEventListener("dragover", draghandle, false);
        dropzone.addEventListener("dragleave", draghandle, false);
        dropzone.addEventListener("drop", dropWithMultipleZips, false);
    </script>
{% endblock %}
{% block buttons %}
    {{ block('close_button') }}
    <input class="btn btn-primary" id="submit-materials" type="submit" value="Submit" />
{% endblock %}
